<!-- <script>
/**
 * 商品名称:pname
 * 商品ID:pid
 * 评价类型:state
 * 订单编号:pnum
 * -------------------------
 * 表格
 * 评价内容: content
 * 商品ID:id
    被评商品: tradename
    评价类型：etype
    评价人：name
    订单编号：num
    操作：right
 */
</script> -->
<!-- --------------------------------- form表单 ------------------------------------------------>
<template>
    <div>
        <el-form ref="form" :model="form" label-width="80px" :inline="true" size="mini">
            <el-form-item label="商品名称">
                <el-input v-model="form.pname" style="width: 200px margin-right:500px;"></el-input>
            </el-form-item>

            <el-form-item label="商品ID">
                <el-input v-model="form.pid" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="评价类型">
                <el-select v-model="form.state" placeholder="请选择状态">
                    <el-option v-for="(item) in stateOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button @click="resert">重置</el-button>
            </el-form-item>
        </el-form>
        <!------------------------------------------- 表格 -------------------------------------------------------->
        <!-- 评价内容: content，被评商品: tradename，评价类型：etype，评价人：name，订单编号：num，操作：right-->
        <el-table :data="tableData" :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
            <!-- 动态添加表格列  -->
            <el-table-column v-for="(item, index) in column" :key="index" :formatter="item.formatter"
                :label="item.label" :prop="item.prop">
            </el-table-column>
            <!-- 评分星星 -->
            <el-table-column label="评分" width="200">
                <template slot-scope="scope">
                    <el-rate v-model="scope.row.star" score-template="{value}" disabled show-score
                        text-color="#ff9900"></el-rate>
                </template>
            </el-table-column>
            <!-- 操作项 -->
            <el-table-column label="操作" width="100">
                <template v-slot="scope">
                    <!-- 提供了一条作用域插槽-->
                    <el-button type="text" @click="upDate(scope.row)">修改</el-button>
                    <el-button type="text" @click="deleteDate(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- -----------------------------修改 弹出框--------------------------------------->
        <el-dialog title="评价修改" :visible.sync="dialogFormVisible" width="666px">
            <el-row>
                <el-form :model="formInline" :rules="rules" ref="form" label-width="100px">
                    <el-col :span="24">
                        <el-form-item label="姓名" prop="tradename">
                            <el-input v-model="formInline.tradename"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="评价类型" prop="etype">
                            <el-select v-model="formInline.etype" placeholder="请选择类型" style="width: 100%">
                                <el-option v-for="(item) in stateOptions" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="订单编号" prop="num">
                            <el-input v-model="formInline.num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="评价内容" prop="content">
                            <el-input type="textarea" v-model="formInline.content" :autosize="{ minRows: 4 }"
                                maxlength="200" placeholder="请输入评价内容" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="UpdateDate">确 定</el-button>
        </el-dialog>
    </div>
</template>

<script>
import api from "../../api/index";
import { Update, Del } from "../../api/modules/reply";
export default {
    name: 'replay',
    props: {
        msg: String,
    },
    data() {
        return {
            form: {
                pname: undefined,//商品名称
                pid: undefined,
                state: undefined,
                default: false
            },
            formInline: {//弹出框
                tradename: undefined,
                etype: undefined,
                num: undefined,
                content: false
            },
            column: [
                {
                    label: '商品ID',
                    prop: 'id'
                },
                {
                    label: '被评商品',
                    prop: 'tradename'
                },
                {
                    label: '订单编号',
                    prop: 'num'
                },

                {
                    label: '评价人',
                    prop: 'name'
                },

                {
                    label: '评价类型',
                    prop: 'etype',

                    formatter: row => {
                        return row.etype === 0 ? '好评' : row.etype === 1 ? '中评' : '差评'
                    },
                },
                {
                    label: '评价内容',
                    prop: 'content'
                },
            ],//动态添加表格项column
            stateOptions: [
                {
                    value: 0,
                    label: '好评'
                },
                {
                    value: 1,
                    label: '中评'
                },
                {
                    value: 2,
                    label: '差评'
                }],//状态配置项
            //验证规则
            rules: {
                tradename: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],//名字
                etype: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],//评价类型
                num: [
                    { required: true, message: '请输入订单编号', trigger: 'blur' }
                ],//订单编号
                content: [
                    { required: true, message: '请输入评价内容', trigger: 'blur' }
                ],//订单编

            },//设置表单验证规则
            dialogFormVisible: false,//默认弹窗为关闭状态
            tableData: [],//应该显示的数据
            pname: "",
            pid: "",
            list: [],//全部数据
            star: 1,
            state: ""

        }
    },

    methods: {
        //点击操作列修改按钮
        upDate(row) {
            this.formInline = this.$deep(row);
            this.dialogFormVisible = true;//弹窗
        },
        //修改弹框点击确定按钮
        UpdateDate() {
            return new Promise(resolve => {
                const formInline = this.formInline;
                var data = {
                    tradename: formInline.tradename,
                    etype: formInline.etype,
                    num: formInline.num,
                    content: formInline.content,
                }  //需要传输的方式
                Update('Reply', formInline, data)
                    .then(_ => {
                        window.location.reload();
                        resolve()
                    })
                this.dialogFormVisible = false;
            })
        },
        //初始请求数据
        init() {
            return new Promise(reslove => {
                api.reply.getReplyData().then((res) => {
                    let { data } = res;
                    data = data.map(item => {
                        //将评分转换number类型
                        if (item.star || item.star === '0') item.star = Number(item.star)
                        //因为0表示的是false，但是string的0是不是false这个得打印试试 我这么写只是防止string0不转换number
                        return item
                    })
                    reslove(data)
                })
            })
        },
        //点击查询按钮
        onSubmit() {
            this.form.default = true;
        },
        //点击重置按钮
        resert() {
            //清空为默认值
            this.formClear('form', this.form);
            //状态也初始化
            this.form.state = undefined;
        },
        //点击操作列删除按钮
        deleteDate(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                Del('Reply', row)
                    .then(_ => {
                        window.location.reload();
                    })
                setTimeout(this.$message.success('删除成功'), 500);
            }).catch(err => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
                console.log(err);
            })
        },
    },
    async created() {
        //页面创建获取数据渲染 
        this.tableData = await this.init()
    },
    watch: {
        form: {
            async handler(msg) {//msg就是改变以后的值
                const list = await this.init()
                const { pname, pid, state } = msg
                console.log('msg', msg);
                if (!pname && !pid && !state) {
                    //输入框内容为空
                    this.tableData = list
                } else {
                    //输入框内容不为空
                    if (this.form.default == false) {
                        this.tableData = list
                    } else {
                        this.tableData = list.filter(item => item.tradename === pname && item.id === pid && item.etype === state)
                    }
                }
            },
            deep: true,//因为监听整个对象所以要使用深度监听
        }
    }
};
</script>

<style scoped lang="less">

</style>
